<template>
  <el-card :style="`width:${containerWidth}`" class="box-card">
    <el-scrollbar>
      <div :style="{ width: '100%', height: `${containerHeight}` }">
        <div
          :style="{ 'grid-template-columns': `repeat(auto-fill,${itemWidth})` }"
          class="q-container grid justify-center justify-items-center"
        >
          <template v-for="(item, index) in iconsComponentNames" :key="index">
            <div
              :style="`width:${itemWidth};height:${itemHeight}`"
              class="item flex justify-center items-center flex-col cursor-pointer"
              @click="handlerClick(item)"
            >
              <el-icon size="24">
                <component :is="item" />
              </el-icon>
              <span class="text-size-3" v-if="props.showName">{{ item }}</span>
            </div>
          </template>
        </div>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script lang="ts" setup>
const props = defineProps({
  //容器宽度
  containerWidth: {
    type: [String],
    default: '100%'
  },
  //容器高度
  containerHeight: {
    type: [String],
    default: '500px'
  },
  //元素宽度
  itemWidth: {
    type: [String],
    default: '40px'
  },
  //元素高度
  itemHeight: {
    type: [String],
    default: '40px'
  },
  showName: Boolean,
  search: String
})

const containerWidth = computed(() => props.containerWidth)
const containerHeight = computed(() => props.containerHeight)
const itemWidth = computed(() => {
  if (props.showName && Number.parseInt(props.itemWidth) < 100) {
    return '100px'
  } else {
    return props.itemWidth
  }
})
const itemHeight = computed(() => {
  if (props.showName && Number.parseInt(props.itemHeight) < 55) {
    return '55px'
  } else {
    return props.itemHeight
  }
})

const elementPlusIconsVue = inject('$elementPlusIconsVue')
const iconsComponentNames = computed(() => {
  const componentNames: Array<string> = []
  for (const [key] of Object.entries(elementPlusIconsVue as any)) {
    if (props.search) {
      if (key.toLocaleLowerCase().includes(props.search.toLocaleLowerCase())) {
        componentNames.push(key)
      }
    } else {
      componentNames.push(key)
    }
  }
  return componentNames
})
const source = ref('')
const { text, copy, copied, isSupported } = useClipboard({ source })
const handlerClick = async (content: string) => {
  source.value = content
  await copy(source.value)
  if (copied) {
    ElMessage.success(`复制成功：${text.value}`)
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  .item:hover {
    background-color: var(--el-bg-color-page);
  }
}
</style>
